<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <title>套餐新增</title>
    <meta charset="utf-8">
    <!-- Bootstrap Core CSS -->
    <link href="${css}/bootstrap.min.css" rel="stylesheet"/>
    <!-- bootstrapValidator验证 -->
    <link href="${assets}/bootstrapValidator/css/bootstrapValidator.css" rel="stylesheet"/>
    <!-- bootstrapSelect -->
    <link href="${assets}/bootstrapSelect/css/bootstrap-select.min.css" rel="stylesheet"/>
</head>
<body style="width: 98%">
    <form id="myForm" class="form-horizontal" method="post" >
        <div class="form-group">
            <label for="packageName" class="col-sm-2 control-label">套餐名称</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="packageName" name="packageName"
                       placeholder="请输入套餐名称">
            </div>
        </div>
        <div class="form-group">
            <label for="price" class="col-sm-2 control-label">价格</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="price" name="price"
                       placeholder="请输入价格">
            </div>
        </div>
        <div class="form-group">
            <label for="info" class="col-sm-2 control-label">介绍</label>
            <div class="col-sm-10">
                <textarea class="form-control" id="info" name="info" rows="5" placeholder="请输入介绍"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label for="instrumentIds" class="col-sm-2 control-label">仪器</label>
            <div class="col-sm-10">
                <select id="instrumentIds" name="instrumentIds" class="selectpicker show-tick form-control" multiple data-live-search="true">
                    <c:forEach items="${instrumentList}" var="instrument">
                        <option value="${instrument.id}" <c:if test='${instrument.isDel}'>class="get-class" disabled</c:if> >${instrument.instrumentName}</option>
                    </c:forEach>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="state" class="col-sm-2 control-label">套餐状态</label>
            <div class="col-sm-10">
                <select id="state" name="state" class="form-control">
                    <option value="1">启用</option>
                    <option value="0">禁用</option>
                </select>
            </div>
        </div>
        <div class="modal-footer" style="text-align: center ">
            <button type="button" class="btn btn-default" data-dismiss="modal" id="closeModalButt">关闭</button>
            <button type="submit" class="btn btn-primary">保存</button>
        </div>
    </form>

    <!-- jQuery -->
    <script src="${js}/jquery-1.9.1.min.js"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="${js}/bootstrap.min.js"></script>

    <script src="${js}/bootbox.js"></script>
    <!-- bootstrapValidator验证 -->
    <script src="${assets}/bootstrapValidator/js/bootstrapValidator.js"></script>
    <!-- bootstrapValidator验证 国际化中文 -->
    <script src="${assets}/bootstrapValidator/js/language/zh_CN.js"></script>
    <!-- bootstrapSelect -->
    <script src="${assets}/bootstrapSelect/js/bootstrap-select.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function() {
            //初始化bootstrapSelect下拉框样式
            $('.selectpicker').selectpicker({
                noneSelectedText:'请选择...'
            });

            $('#myForm').bootstrapValidator({
                message: 'This value is not valid',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    packageName: {
                        validators: {
                            notEmpty: true
                        }
                    },
                    instrumentIds: {
                        validators: {
                            notEmpty: true
                        }
                    }
                }
            }).on('success.form.bv', function (e) {
                e.preventDefault();
                $.ajax({
                    url:'${URL_ADM_PACKAGE_ADD}',
                    type:'post',
                    data:$('#myForm').serialize(),
                    async : false, //默认为true 异步
                    error:function(){
                        alert('error');
                    },
                    success:function(data){
                        window.parent.closeModal("add");
                    }
                });
            });

            //关闭弹出框
            $("#closeModalButt").on("click",function(){
                window.parent.simpleCloseModal("add");
            });

        });

    </script>
</body>
</html>